<template>
  <div style="height:6vh;padding: 10px 20px;background-color:#fff;">
    <span style="line-height: 60px;font-size:20px;">宠物用品管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;" @click="openAddDialog">新增宠物用品</el-button>
  </div>
  <el-card style="height: 70px;margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="宠物用品搜索" style="width: 220px;">
        <el-input placeholder="输入宠物用品名称" v-model="searchPetSuppliesForm.name" @keydown.enter="loadPetSupplies"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadPetSupplies">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-table :data="petSupplies" stripe>
    <el-table-column prop="id" label="宠物用品id"></el-table-column>
    <el-table-column prop="name" label="宠物用品名称"></el-table-column>
    <el-table-column prop="type" label="用品类型"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column prop="brand" label="品牌"></el-table-column>
    <el-table-column prop="description" label="描述"></el-table-column>
    <el-table-column prop="create_time" label="创建时间"></el-table-column>
    <el-table-column prop="update_time" label="更新时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="openEditDialog(scope.row)">编辑</el-button>
        <el-button @click="deletePetSupply(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增/编辑对话框 -->
  <el-dialog :title="dialogTitle" style="width: 1000px;padding: 40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="宠物用品名称">
            <el-input placeholder="请输入宠物用品名称" v-model="currentPetSupply.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用品类型">
            <el-input placeholder="请输入用品类型" v-model="currentPetSupply.type"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="价格">
            <el-input placeholder="请输入价格" v-model="currentPetSupply.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input placeholder="请输入品牌" v-model="currentPetSupply.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述">
            <el-input placeholder="请输入描述" v-model="currentPetSupply.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="savePetSupply">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";

// 假设这是你的基础 URL
const BASE_URL = 'your_base_url';

// 定义变量用来控制弹窗是否可见
const dialogVisible = ref(false);
// 定义数组用来保存宠物用品数据
const petSupplies = ref([]);
// 定义变量用来保存宠物用品搜索条件
const searchPetSuppliesForm = ref({ name: '' });
// 定义变量用来保存当前操作的宠物用品数据
const currentPetSupply = ref({
  id: null,
  name: '',
  type: '',
  price: '',
  brand: '',
  description: ''
});
// 定义变量用来保存弹窗的标题
const dialogTitle = ref('新增宠物用品');

// 点击"新增宠物用品"按钮时调用的方法
const openAddDialog = () => {
  dialogTitle.value = '新增宠物用品';
  currentPetSupply.value = {
    id: null,
    name: '',
    type: '',
    price: '',
    brand: '',
    description: ''
  };
  dialogVisible.value = true;
};

// 处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('您确认要关闭弹窗吗?')) {
    currentPetSupply.value = {
      id: null,
      name: '',
      type: '',
      price: '',
      brand: '',
      description: ''
    };
    dialogVisible.value = false;
  }
};

// 新增或更新宠物用品信息
const savePetSupply = () => {
  let data = qs.stringify(currentPetSupply.value);
  // axios.post(BASE_URL+'/v1/pet_supplies/save',data).then((response)=>{
  //     if(response.data.code == 2000){
  //       ElMessage.success('保存成功!');
  //       currentPetSupply.value = {};//保存成功后要清空弹窗表单并关闭弹窗
  //       dialogVisible.value = false;
  //       loadPetSupplies();
  //     }else{
  //       ElMessage.error(response.data.msg);
  //     }
  //   })
};

// 加载宠物用品列表的方法
const loadPetSupplies = () => {
  let data = qs.stringify(searchPetSuppliesForm.value);
  // axios.get(BASE_URL+'/v1/pet_supplies/select?'+data).then((response)=>{
  //     if(response.data.code == 2000){
  //       petSupplies.value = response.data.data;
  //       console.log( petSupplies.value);
  //     }else{
  //       ElMessage.error(response.data.msg);
  //     }
  //   })
};

// 页面加载完毕立即调用加载宠物用品的方法
onMounted(() => {
  loadPetSupplies();
});

// 重置搜索的方法
const resetSearch = () => {
  searchPetSuppliesForm.value = {}; // 清空搜索条件
  loadPetSupplies(); // 重新加载所有宠物用品数据
};

// 打开编辑对话框
const openEditDialog = (row) => {
  dialogTitle.value = '编辑宠物用品';
  editedPetSupply.value = { ...row };
  dialogVisible.value = true;
};

// 编辑宠物用品信息
const editedPetSupply = (id) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑宠物用品';
  // axios.get(BASE_URL+'/v1/pet_supplies/select?id='+id).then((response)=>{
  //   if(response.data.code==2000){
  //     currentPetSupply.value = response.data.data[0];
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // })
}

// 删除宠物用品
const deletePetSupply = (id) => {
  if (confirm('您确认要删除当前宠物用品吗?')) {
    // axios.get(BASE_URL+'/v1/pet_supplies/delete/'+id).then((response)=>{
    //   if(response.data.code==2000){
    //     ElMessage.success('删除宠物用品成功!')
    //      loadPetSupplies();
    //   }else{
    //     ElMessage.error(response.data.msg);
    //   }
    // })
  }
};
</script>

<style scoped>

</style>